<template>
  <div class="login_container">
    <div class="login_box">
      <!-- 头像区域 -->
      <div class="avatar_box">
        <img src="../assets/dao.jpg" alt="头像" />
      </div>

      <!-- 表单区域 -->
      <el-form ref="LoginFormRef" class="login_form" :model="LoginForm" :rules="LoginFormRules">
        <el-tag type="danger" v-if="flag">用户名手机号或密码错误，请检查您的手机号与密码</el-tag>
        <!-- 帐号 -->
        <el-form-item prop="telephone">
          <el-input
            placeholder="请输入手机号"
            prefix-icon="el-icon-user-solid"
            v-model="LoginForm.telephone"
          ></el-input>
        </el-form-item>

        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input
            placeholder="请输入密码"
            prefix-icon="el-icon-lock"
            v-model="LoginForm.password"
            type="password"
          ></el-input>
        </el-form-item>

        <!-- 按钮区域 -->
        <el-form-item class="btns">
          <el-button type="primary" @click="login" @keyup.enter="login">登录</el-button>
          <el-button type="info" @click="reset">重置</el-button>
        </el-form-item>
        <div class="register">
          <a href="#" @click.prevent="showRegisterDialog">没有账号？注册账号</a>
        </div>
      </el-form>
    </div>

    <el-dialog title="注册账号" :visible.sync="registerDialogVisible" width="50%" @close="dialogClose">
      <el-form
        :model="registerForm"
        :rules="registerFormRule"
        ref="registerFormRef"
        label-width="70px"
      >
        <el-form-item label="昵称" prop="username">
          <el-input v-model="registerForm.username"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="telephone">
          <el-input v-model="registerForm.telephone"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="registerForm.password"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="registerForm.email"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="registerForm.gender" placeholder="请选择性别">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="registerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUser">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    //验证规则
    var checkEmail = (rule, value, cb) => {
      const reg = /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/;

      if (reg.test(value)) {
        return cb();
      }
      cb(new Error("请输入合法邮箱！"));
    };
    var checkMobile = (rule, value, cb) => {
      const reg = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/;
      if (reg.test(value)) {
        return cb();
      }
      cb(new Error("请输入合法手机号！"));
    };
    return {
      flag: false,
      // 数据绑定
      LoginForm: {
        telephone: "",
        password: ""
      },
      registerForm: {
        username: "",
        telephone: "",
        password: "",
        email: "",
        gender: "男"
      },
      // 注册窗体显示与否
      registerDialogVisible: false,
      // 表单验证
      LoginFormRules: {
        // 帐号验证
        telephone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { validator: checkMobile, trigger: "blur" }
        ],
        // 密码验证
        password: [
          { required: true, message: "请输入帐号密码", trigger: "blur" },
          { min: 6, max: 15, message: "长度在 6 到 15 个字符", trigger: "blur" }
        ]
      },
      registerFormRule: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 1, max: 10, message: "长度在 1 到 10 个字符", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, max: 15, message: "长度在 6 到 15 个字符", trigger: "blur" }
        ],
        email: [
          { message: "请输入邮箱", trigger: "blur" },
          { validator: checkEmail, trigger: "blur" }
        ],
        telephone: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { validator: checkMobile, trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    //重置按钮功能
    reset() {
      this.$refs.LoginFormRef.resetFields();
      this.flag = false;
    },
    login() {
      this.$refs.LoginFormRef.validate(async valid => {
        if (!valid) {
          return;
        }
        const { data: result } = await this.$http.post("login", this.LoginForm);
        if (result.errorCode != 0) {
          this.flag = true;
          return
        }
        window.sessionStorage.setItem("token", result.data.token);
        window.sessionStorage.setItem("username", result.data.username);
        window.sessionStorage.setItem("telephone", result.data.telephone);
        window.sessionStorage.setItem("email", result.data.email);
        window.sessionStorage.setItem("gender", result.data.gender);
        this.$message({
          showClose: true,
          message: "登录成功！",
          type: "success"
        });
        this.$router.push("/home");
      });
    },
    showRegisterDialog() {
      this.registerDialogVisible = true;
    },
    dialogClose() {
      this.$refs.registerFormRef.resetFields();
      this.registerForm.name = "";
      this.registerForm.telephone = "";
      this.registerForm.password = "";
      this.registerForm.email = "";
      this.registerForm.gender = "男";
    },
    addUser() {
      this.$refs.registerFormRef.validate(async valid => {
        if (!valid) {
          return;
        }
        const { data: result } = await this.$http.post(
          "register",
          this.registerForm
        );
        if (result.errorCode === 1) {
          this.$message({
            showClose: true,
            message: "手机号已被占用，请重新输入",
            type: "warning"
          });
          return;
        }
        this.$message({
          showClose: true,
          message: "注册成功，请登录",
          type: "success"
        });
        this.LoginForm.telephone = this.registerForm.telephone;
        this.registerDialogVisible = false;
      });
    }
  }
};
</script>

<style lang="less" scoped>
.login_container {
  background-color: #2b4b6b;
  height: 100%;
  background-image: url("../assets/1.jpg");
  background-size: 100%;
  overflow: hidden;
}
.login_box {
  width: 450px;
  height: 300px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 5px 5px #ccc;

  .avatar_box {
    height: 130px;
    width: 130px;
    border: 1px solid #eee;
    border-radius: 50%;
    padding: 10px;
    background-color: #fff;
    box-shadow: 0 0 10px #eee;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);

    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #eee;
    }
  }

  .btns {
    display: flex;
    justify-content: space-evenly;
  }
}

.login_form {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}
.register a {
  text-decoration: none;
  color: #ccc;
  margin-left: 130px;
}

.login_box::before,
.login_box::after {
  content: "";
  border: 2px solid #2ecc71;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: -15px;
  animation: borderClip 8s cubic-bezier(0.17, 1.08, 1, 1.39) infinite;
}
.login_box::after {
  animation-delay: -4s;
}
@keyframes borderClip {
  0%,
  100% {
    clip: rect(0, 478px, 2px, 0);
  }
  25% {
    clip: rect(0, 2px, 328px, 0);
  }
  50% {
    clip: rect(328px, 478px, 330px, 0);
  }
  75% {
    clip: rect(0, 480px, 328px, 478px);
  }
}
</style>